<template>
  <Navbar />
  <KeepAlive>
    <component :is="tabs[componentName]" class="content"></component>
  </KeepAlive>
  <BottomNav :changeComponent="changeComponent" />
</template>

<script setup>
import { ref } from "vue";
import Navbar from "./components/Navbar.vue";
import BottomNav from "./components/BottomNav.vue";
import Form from "./components/Form.vue";
import Table from "./components/Table.vue";

const componentName = ref("Form");
const tabs = {
  Form,
  Table,
};

const changeComponent = (name) => {
  componentName.value = name;
};
</script>

<style>
.content {
  margin-bottom: 50px;
  margin-top: 54px;
}

body {
  transition: background-color 0.25s, color 0.25s;
  color: var(--color-text);
  background-color: var(--color-body);
}
</style>
